<div class="modal-header">
    <button type="button" class="close" ng-click="cancel()">&times;</button>
    <span class="bebas modal-title" style="color: #657B83;font-size: 19px">
        <i class="fa fa-key"></i> &nbsp;Request API Key</span>
</div>

<div class="modal-body" ng-if="!apiKey">
    <div class="alert alert-info" style="padding: 8px">
        <i style="font-size:60px; float: left;padding-right:10px; color: #3a87ad" class="fa fa-info-circle"></i>
        <span class="font-90em">
            Enter a <b>client identifier</b> to request an API key. API keys enable third party application access to
            this ICE instance. For web applications,
            it is recommended that a unique domain name be used. <b>e.g. app.example.com</b>
        </span>
    </div>

    <form>
        <div class="form-group">
            <label>Client ID</label> &nbsp; <input type="text"
                                                   ng-class="{'input_box':!clientIdValidationError, 'input_box_error':clientIdValidationError}"
                                                   style="width: 423px" ng-model="client.id">
            <button type="button" class="btn btn-sm btn-primary" ng-click="generateToken()">Generate</button>
        </div>
    </form>
</div>

<div class="modal-body" ng-if="apiKey">
    <div class="alert alert-success" style="padding: 8px">
        <i style="font-size:40px; float: left; padding-right:10px;" class="fa fa-check-circle text-success"></i>
        <span class="font-90em">
            New API Key created successfully.
            Use the details below when accessing the ICE API. Please note that the token cannot be
            recovered if lost and will have to be regenerated.
        </span>
    </div>

    <br>

    <dl class="dl-horizontal">
        <dt>Client ID</dt>
        <dd>{{apiKey.clientId}}</dd>

        <dt>Token</dt>
        <dd>{{apiKey.token}}</dd>
    </dl>
</div>

<div class="modal-footer">
    <button class="btn btn-default btn-sm" ng-click="cancel()">Close</button>
</div>
